<template>
    <a-control-group :direction="'v'" :block="true" class="a-input-rich-text">
        <a-control-group
            class="header"
            :class="[`c-bg-color-${color}`, !sharp ? `c-round-${size}` : '']"
        >
            <a-control-group class="left">
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                >
                    <span class="fa fa-fw fa-header"></span>
                </a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-bold"></span
                ></a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-text-height"></span
                ></a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-font"></span
                ></a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-italic"></span
                ></a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-underline"></span
                ></a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-strikethrough"></span
                ></a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    >C</a-button
                >
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    >Bg</a-button
                >
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-image"></span
                ></a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-chain"></span
                ></a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-chain-broken"></span
                ></a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-list-ol"></span
                ></a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-list-ul"></span
                ></a-button>
                <a-button
                    :color="color"
                    :size="size"
                    :disabled="disabled"
                    :sharp="true"
                    :square="true"
                    ><span class="fa fa-fw fa-table"></span
                ></a-button>
            </a-control-group>
            <a-button
                :color="color"
                :size="size"
                :disabled="disabled"
                :sharp="true"
                :square="true"
                ><span class="fa fa-fw fa-arrows-alt"></span
            ></a-button>
        </a-control-group>
        <div
            class="body c-b-t-0"
            :contenteditable="!disabled && !readonly"
            :class="[
                `color-${color}`,
                `size-${size}`,
                { sharp: sharp },
                { disabled: disabled },
            ]"
            v-html="value"
            ref="body"
        ></div>
    </a-control-group>
</template>

<style lang="scss" scoped>
@import "../scss/vars";

.a-input-rich-text {
    .header {
        display: flex;
        justify-content: space-between;
    }
    .body {
        min-height: 400px;
        box-sizing: border-box;
        outline: none;
        transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;

        @each $colorPackageName, $colorPackageValue in $colorPackages {
            $bgColor: map-get($colorPackageValue, "bgColor");

            &.color-#{$colorPackageName} {
                background-color: $defaultBgColor;
                border: solid 1px $bgColor;

                &:focus:not(.disabled) {
                    border-color: darken($bgColor, 20%);
                    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
                        0 0 8px lighten($bgColor, 10%);
                }

                &.disabled {
                    opacity: 0.5;
                    cursor: not-allowed;
                }
            }
        }

        @each $sizePackageName, $sizePackageValue in $sizePackages {
            &.size-#{$sizePackageName} {
                padding: map-get($sizePackageValue, "space");
                &:not(.sharp) {
                    border-radius: map-get($sizePackageValue, "borderRadius");
                }
            }
        }
    }
}
</style>

<script>
import AButton from './AButton.vue'
import AControlGroup from './AControlGroup.vue'
import inputMixin from "../common/inputMixin"

export default {
    components: { AButton, AControlGroup },
    mixins: [inputMixin],
    props: {
        color: {
            type: String,
            default: 'default',
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        size: {
            type: String,
            default: 'm',
        },
        sharp: {
            type: Boolean,
            default: false,
        },
        readonly: {
            type: Boolean,
            default: false,
        },
        value: {
            type: String,
            default: null
        },
        placeholder: {
            type: String,
            default: null
        },
    },
    data() {
        return {
            snapshotList: [],
            tobeDeletedSnapshotList: [],
            si: setInterval(() => this.takeSnapshot(), 1000),
            obser: new MutationObserver(this.onChange)
        }
    },
    mounted() {
        this.addEventListener()
        this.takeSnapshot()
        this.obser.observe(this.$refs.body, { attributes: true, childList: true, subtree: true })
    },
    methods: {
        getHtml() {
            return this.$refs.body.innerHTML
        },
        getText() {
            return this.$refs.body.innerText
        },
        addEventListener() {
            this.$refs.body.addEventListener('keydown', this.onBodyKeydown)
        },
        onBodyKeydown(e) {
            //console.log(e.keyCode)
            if (e.ctrlKey) {
                if (e.keyCode == 90) {
                    e.preventDefault()
                    this.undo()
                } else if (e.keyCode == 89) {
                    e.preventDefault()
                    this.redo()
                }
            }
        },
        onChange() {
            let html = this.getHtml()
            let indexOfFirstLt = html.indexOf('<')
            let strBeforeFirstLt = html.substring(0, indexOfFirstLt)
            let htmlBeforeFirstLt = strBeforeFirstLt ? `<div>${strBeforeFirstLt}</div>` : ''
            let formatedHtml = htmlBeforeFirstLt + html.substr(indexOfFirstLt)
            console.log(formatedHtml)
            this.$emit('update:value', formatedHtml)
        },
        takeSnapshot() {
            if (this.value != this.snapshotList[this.snapshotList.length - 1]) {
                this.snapshotList.push(this.value)
            }
        },
        undo() {
            if (this.snapshotList.length == 1) {
                return
            }
            let snapshot = this.snapshotList.pop()
            this.tobeDeletedSnapshotList.unshift(snapshot)
        },
        redo() {
            if (this.tobeDeletedSnapshotList.length == 0) {
                return
            }
            let snapshot = this.tobeDeletedSnapshotList.shift()
            this.snapshotList.push(snapshot)
        },
    },
    unmounted() {
        clearInterval(this.si)
        this.obser.disconnect()
    }
}
</script>